<script src="__PUBLIC__/js/jquery/validate.js"></script>
<script>
    $(function() {
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^1[3,5,8]\d{9}$/;
            if (length > 0) {
                return (length == 11 && mobile.exec(value)) ? true : false;
            } else {
                return true;
            }

        });
        $("#form").validate({
            errorPlacement: function(error, element) {
                var error_td = element.parent('td');
                error_td.find('label.error').hide();
                error_td.append(error);
            },
            submitHandler: function(form) {
                bindPhoneConfirm()
            },
            rules: {
                phone: {
                    required: true,
                    isMobile: true
                },
                code: {
                    required: true,
                    remote: {
                        url: "{:U('Ajax/checkCode')}",
                        type: 'post',
                        data: {
                            code: function() {
                                return $('#code').val();
                            }
                        }
                    }
                },
                mobile_code: {
                    required: true,
                    remote: {
                        url: "{:U('Ajax/checkMobileSendCode')}",
                        type: 'post',
                        data: {
                            code: function() {
                                return $("input[name=mobile_code]").val();
                            }
                        }
                    }
                }
            },
            messages: {
                phone: {
                    required: '手机号码不能为空',
                    isMobile: "请正确填写您的手机号码"
                },
                code: {
                    required: '请输入验证码',
                    remote: '验证码有误'
                },
                mobile_code: {
                    required: '请输入校验码',
                    remote: '校验码有误'
                }
            }
        });
        $("#getcode_gg").click(function() {
            $(this).attr("src", '__PUBLIC__/js/group/code_gg.php?' + Math.random());
        });
    })
    function checkMobileSend() {
        var phone = $("#phone").val();
        if (phone == '') {
            if ($("#phone").next("label").length == 0) {
                $("#phone").after('<label class="error" for="phone" generated="true">手机号码不能为空</label>');
                $("#phone").focus();
            } else {
                $("#phone").next("label").text('手机号码不能为空');
                $("#phone").focus();

            }
        } else {
            var phone = $('#phone').val();
            var pattern = /^1[3,5,8]\d{9}$/;
            if (pattern.test(phone) == true) {
                $("#phone").next("label").remove();
                $("#phone").focus();
            }
        }
        var code = $("#code").val();
        if (code == '') {
            if ($("#code").nextAll("label").length == 0) {
                $("#getcode_gg").after('<label class="error" for="code" generated="true">验证码不能为空</label>');
                $("#code").focus();
            } else {
                $("#getcode_gg").nextAll("label").text('验证码不能为空');
                $("#code").focus();

            }
        } else {
            $.post("{:U('Ajax/checkCode')}", {
                code: code
            }, function(data) {
                if (data == 'true') {

                    $.post("{:U('Ajax/sendMobileBind')}", {
                        code: code,
                        phone: phone
                    }, function(data) {
                        if (data != '') {
                            showTip('系统提示', data, '2');
                            $("#validTips").hide();
                        } else {
                            $("#validTips").show();
                            $("#num").text(59);
                            daojishi = setInterval("mobileDaojishi()", 1000);
                            $("#request_valid").attr("disabled", "disable");
                            $("input[name=mobile_code]").focus();
                        }
                    })
                } else {
                    $("#validTips").hide();

                }
            })
        }
    }
    function mobileDaojishi() {
        var num = $("#num").text();
        $("#num").text(num - 1);
        if (num <= 1) {
            $("#request_valid").removeAttr("disabled");
            $("#validTips").hide();
            clearInterval(daojishi);
        }
    }
    function bindPhoneConfirm() {
        var code = $('#code').val();
        var phone = $("#phone").val();
        
        $.post("{:U('Ajax/bindPhoneConfirm')}", {
            code: code,
            phone: phone
        }, function(data) {
            var word = "";
            if (data == -1) {
                showTip('系统提示', "该手机已被绑定！", '0');
                
            } else {
                
                closebgbox('#mainbox');
                if(data>0){
                    word = ",获得"+data+"积分";
                }
                showTip('系统提示', "绑定手机成功"+word+"！", '1','','','-1');
//                $("#phoneArea").html("<span  id='updatePhone' class='fl'>" + phone + "</span>\n\
//        <a class='fr click_bind' href='javascript:;' onclick='bindPhone()'>修改</a>");
            }
        })
    }
</script>
<style>
    .boxcontent table{text-align: left}
    .boxcontent table td{padding:10px 0}
</style>
<form id="form" method="POST" > 
    <div class='browsebox' id='browsebox' style='position:relative;width:460px'>
        <div class='head' id='headbox'>
            <a class='close' onclick=closebgbox('#mainbox')></a>
            <span id='title'>绑定手机</span>
        </div>
        <div class='boxcontent' style='position:relative;padding:0'>
            <div id='bind_advantage'>
                <p> 绑定手机后，您可以：</p>
                <ul><li>1.获得{$config.points_bindPhone}积分</li>
                    <li>2.用手机号作为账号登录{$config.title}</li>
                    <li>3.让账户变的更加安全</li>
                </ul>
            </div>
            <table width="415px;"align="center">
                <tr>
                    <td width="80px" style="text-align:right">手机号码：</td>
                    <td><input id="phone" name="phone" type="text" maxlength="11" value="" style="width:150px" autocomplete="off"></td>
                </tr>
                <tr>
                    <td style="text-align:right">验证码：</td>
                    <td><input type="text" class="input login_input_1" name="code"  id="code" style="width:70px;" maxlength="4" autocomplete="off" />
                        <img src="__PUBLIC__/js/group/code_gg.php" id="getcode_gg"style="width:110px;cursor:pointer;" title="看不清，点击换一张" align="absmiddle"></td>
                </tr>
                <tr>
                    <td style="text-align:right"><span>*</span>
                        校验码：</td>
                    <td><input id="request_valid" type="button" value="免费获取" onclick="checkMobileSend()">
                        <input name="mobile_code" type="text" maxlength="6" value="" style="width:70px" autocomplete="off"></td>
                </tr>
                <tr>
                    <td style="text-align:right"></td>
                    <td>
                        <p id="validTips" style="display: hide; color: rgb(136, 136, 136); border-color: rgb(212, 212, 212);">
                            校验码已发出，请注意查收短信，若没收到，您可在
                            <span style="color:Red" id="num"></span>
                            秒后要求系统重新发送。
                        </p></td>
                </tr>

            </table>
            <button class='button_g_2 hyzl_right_c' type="submit" style='margin:15px 0 20px'>绑定手机</button>
        </div>
    </div>
</form>